﻿@{
    ViewBag.MainMenu = "Portal";
    ViewBag.LeftMenu = "ShortcutMenu";

    ViewBag.Title = "快捷菜单";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<style type="text/css">
    .divWeixinMenu {
        background-color: #F6F6F6;
        height: 100%;
        font-size: 15px;
    }

    .divWeixinMainMenu {
        margin-top: 15px;
        margin-bottom: 15px;
        margin-left: 15px;
        margin-right: 15px;
    }

    .divWeixinMenuItem {
        margin-top: 15px;
        margin-bottom: 15px;
        margin-left: 15px;
        margin-right: 15px;
    }

    .divWeixinMenuItem_Add {
        margin-top: 15px;
        margin-bottom: 15px;
        margin-left: 15px;
        margin-right: 15px;
    }

        .divWeixinMenuItem_Add a {
            color: #777777;
        }
</style>

<script language="javascript">

    var _menu = new Object();
    _menu.button = new Array();

    $(document).ready(function () {

        if (_online == false)
            return;

        getMenu();
    });

    function getMenu() {
        var loadLayerIndex = layer.load(0, {
            shade: [0.2, '#fff']
        });

        $.ajax({
            url: "/Api/Portal/GetShortcutMenu",
            type: "POST",
            dataType: "json",
            success: function (data, status, jqXHR) {
                layer.close(loadLayerIndex);
                if (data.Success) {
                    if (data.Data != null && data.Data.Menu != "") {
                        _menu = eval("(" + data.Data.Menu + ")");
                        //if (_menu.button.length == 0) {
                        //    setDefaultMenu();
                        //}
                    }
                    else {
                        setDefaultMenu();
                    }

                } else {
                    layerAlert(data.Message);
                }

                renderMenu();
            },
            error: function (xmlHttpRequest) {
                layer.close(loadLayerIndex);
                alert("Error: " + xmlHttpRequest.status);
            }
        });
    }

    function setDefaultMenu() {
        if (_menu.button.length == 0) {
            var button1 = new Object;
            button1.type = "wxc_function";
            button1.name = "主页";
            button1.function = "portal";
            _menu.button[0] = button1;

            var button2 = new Object;
            button2.type = "wxc_function";
            button2.name = "积分商城";
            button2.function = "pointCommodity";
            _menu.button[1] = button2;

            var button3 = new Object;
            button3.type = "wxc_function";
            button3.name = "积分账户";
            button3.function = "pointAccount";
            _menu.button[2] = button3;

            var button4 = new Object;
            button4.type = "wxc_function";
            button4.name = "现金账户";
            button4.function = "cashAccount";
            _menu.button[3] = button4;

            var button5 = new Object;
            button5.type = "wxc_function";
            button5.name = "会员中心";
            button5.function = "memberCenter";
            _menu.button[4] = button5;
        }
    }

    function renderMenu() {
        // alert(JSON.stringify(_menu));

        var gettpl = document.getElementById('menuTemplate').innerHTML;
        laytpl(gettpl).render(_menu, function (html) {
            document.getElementById('divMenuContainer').innerHTML = html;
        });
    }

    function createButton() {
        layer.open({
            type: 2,
            area: ['540px', '270px'], //宽高
            closeBtn: false,
            title: "",
            shift: _layerShift,
            content: 'ShortcutMenuEdit?mode=createButton'
        });
    }

    function modifyButton(index) {
        layer.open({
            type: 2,
            area: ['540px', '270px'], //宽高
            closeBtn: false,
            title: "",
            shift: _layerShift,
            content: 'ShortcutMenuEdit?mode=modifyButton&button=' + index
        });
    }

    function getButton(index) {
        return _menu.button[index];
    }

    function addButtonAndCloseLayer(layerIndex, button) {

        layer.close(layerIndex);

        _menu.button[_menu.button.length] = button;

        renderMenu();
    }

    function removeButtonAndCloseLayer(layerIndex, index) {
        layer.close(layerIndex);

        _menu.button.splice(index, 1);

        renderMenu();
    }

    function moveButtonLeft(index) {
        if (index == 0)
            return;

        var button = _menu.button[index];

        _menu.button.splice(index, 1);

        _menu.button.splice(index - 1, 0, button);

        renderMenu();
    }

    function moveButtonRight(index) {
        if (index == _menu.button.length - 1)
            return;

        var button = _menu.button[index];

        _menu.button.splice(index, 1);

        _menu.button.splice(index + 1, 0, button);

        renderMenu();
    }

    function closeLayer(layerIndex) {
        layer.close(layerIndex);
        renderMenu();
    }

    function save() {
        var loadLayerIndex = layer.load(0, {
            shade: [0.2, '#fff']
        });

        $.ajax({
            url: "/Api/Portal/SaveShortcutMenu",
            type: "POST",
            dataType: "json",
            data: JSON.stringify(_menu),
            success: function (data, status, jqXHR) {
                layer.close(loadLayerIndex);
                if (data.Success) {
                    layerAlert("保存成功，您的设置将在几分钟之内生效。");

                } else {
                    layerAlert(data.Message);
                }
            },
            error: function (xmlHttpRequest) {
                layer.close(loadLayerIndex);
                alert("Error: " + xmlHttpRequest.status);
            }
        });
    }

</script>

<script id="menuTemplate" type="text/html">

    <div class="divWeixinMenu">

        {{# for(var i = 0, len = d.button.length; i < len; i++){ }}
        <div class="divWeixinMenuItem">
            <div style="float:left">
                <!--指定 line-height:6px，实测高度为 8.5 -->
                <div style="line-height:0px; ">
                    <img src="/Content/Images/microletAup.png" height="6" onclick="moveButtonLeft({{ i }})" />
                </div>
                <div style="line-height:0px; margin-top:6px;">
                    <img src="/Content/Images/microletAdown.png" height="6" onclick="moveButtonRight({{ i }})" />
                </div>
            </div>
            <div style="float:left; margin-left:15px; line-height:18px;">
                <a href="javascript:void(0)" onclick="modifyButton({{ i }})">{{ d.button[i].name }}</a>
            </div>
            <div style="clear:both"></div>
        </div>
        {{# } }}
        {{# if(d.button.length < 5){ }}
        <div class="divWeixinMenuItem_Add">
            <a href="javascript:void(0)" onclick="createButton({{ i }})" class="font_gray_15">+ 点击添加菜单</a>
        </div>
        {{# } }}
    </div>
</script>


<div id="divContentTips">
    快捷菜单指的是从微官网各个页面点击右上角菜单图标所弹出的菜单，可以设置五个项目。
</div>

<div id="divMenuContainer" style="background:#F6F6F6;  margin-top:40px; padding-top:15px; padding-bottom:15px; width:300px;">

</div>

<div style=" margin-top:20px;">
    <input name="btnCreate" type="button" class="btn_blue" id="btnCreate" value="保 存" onclick="save()" />
</div>
